<!-- main -->
<template>
	<div class='container'>
		<div class="title">
			<h1>鞋子卖场{{type}}</h1>
			<ul>
				<li :class="this.type===0?'on':''" @click="type=0">全部商品</li>
				<li :class="this.type===1?'on':''" @click="type=1">男鞋</li>
				<li :class="this.type===2?'on':''" @click="type=2">女鞋</li>
			</ul>
		</div>
		<AllShopVue :shopList='shopList'></AllShopVue>
	</div>
</template>
<script>
	import AllShopVue from './AllShop.vue'
	export default {
		name: 'hello-world',
		components: {
			AllShopVue
		},
		computed:{
			shopList(){
				return this.dataList.filter(item=>{
					if(this.type==0){
						return true
					}else{
						return item.type===this.type
					}
				})
			}
		},
		data() {
			return {
				// type 0  1 nanxie  2女鞋
				type:0,
				dataList: [
					{
						img: 'https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i1/106798869/O1CN01fjhgx32FO3Pf7PllF_!!0-saturn_solar.jpg_580x580Q90.jpg_.webp',
						name: '欧洲站潮牌男鞋百搭新款小白鞋男美杜莎美人头男鞋平底休闲板鞋潮',
						id: 1,
						price: 278,
						type: 1
					},
					{
						img: 'https://img.alicdn.com/imgextra/i3/725951136/TB2I9TomQ7mBKNjSZFyXXbydFXa_!!725951136.jpg_430x430q90.jpg',
						name: '回力男鞋帆布鞋低帮网球田径运动跑步鞋锻炼鞋女鞋大码鞋WL-27A',
						id: 2,
						price: 79,
						type: 1
					},
					{
						img: 'https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i3/92688455/O1CN012kTige2CKRUgvB3zk_!!92688455.jpg_430x430q90.jpg',
						name: '李宁跑步鞋男网面透气男鞋夏季减震跑鞋轻便鞋子健身鞋男士运动鞋',
						id: 3,
						price: 278,
						type: 1
					},
					{
						img: 'https://gd2.alicdn.com/imgextra/i2/0/O1CN016l0koq1INXhYcmHWe_!!0-item_pic.jpg_400x400.jpg',
						name: '【王小毒】星河灿烂●芭蕾鞋2022百搭粗跟浅口小香风平底单鞋女',
						id: 4,
						price: 289,
						type: 2
					},
					{
						img: 'https://gd2.alicdn.com/imgextra/i3/1900994914/O1CN01vAp9Rm1mAesfPFQ4o_!!1900994914-0-lubanu-s.jpg_400x400.jpg',
						name: '尖头高跟鞋女细跟2022年新款夏季少女网红水钻软皮黑色浅口单鞋',
						id: 5,
						price: 148,
						type: 2
					},
					{
						img: 'https://gd4.alicdn.com/imgextra/i2/1658155406/O1CN01EmNOhC1pnzmg6lwqm_!!1658155406.jpg',
						name: '漆皮黑色高跟鞋时尚浅口10CM性感超细跟白色法式气质职业尖头女鞋',
						id: 6,
						price: 179,
						type: 2
					}
				]
			}
		},
		provide(){
			return {
				changeP:this.changeP
			}
		},
		methods:{
			changeP(price,id){
				console.log('修改价格',price,id);
				this.dataList.forEach(item=>{
					if(item.id===id){
						item.price = price
					}
				})
			}
		},
	}
</script>
<style scoped>
	.container {
		width: 1180px;
		margin: 0 auto;
		padding-top: 100px;
	}

	.container .title {
		display: flex;
		justify-content: space-between;
	}

	.container .title h1 {
		font-size: 20px;
		font-weight: 500;
		color: #999;
	}

	.container .title ul {
		display: flex;
	}

	.container .title ul li {
		margin-left: 10px;
		cursor: pointer;
	}

	.container .title ul li:hover,
	.container .title ul li.on {
		color: red;
	}

	.content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.shop-list {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
	}

	.shop-list .item {
		width: 380px;
		background-color: red;
		margin-bottom: 20px;
	}
</style>
